﻿<template>
    <div>
        <ul> 
            <li v-for="m in megList" :key="m.id">
                <!-- 跳转路由并携带query参数,to的字符串写法 -->
                <router-link :to="`/home/message/detil/${m.id}/${m.name}`">{{m.name}}</router-link>
                <!-- 跳转路由并携带query参数,to的对象写法 -->
                <!-- <router-link :to="{
                    //to对象里面能写俩个属性
                    //1.path
                    name: 'xiangqing',
                    //2.query
                    query:{
                        id: m.id,
                        name: m.name
                    }
                }">
                    {{m.name}}
                </router-link> -->
            </li>
            <hr />
            <router-view></router-view>
        </ul>
    </div>
</template>

<script>
import { nanoid } from 'nanoid'
    export default {
        name:'Message',
        components:{},
        data(){
            return{
                newMeg:['消息1','消息2','消息3'],
                megList:[
                    {
                        id:nanoid(),
                        name: '消息1'
                    },
                    {
                        id:nanoid(),
                        name: '消息2'
                    },
                    {
                        id:nanoid(),
                        name: '消息3'
                    },
                ]
            }
        }
    }
</script>

<style scoped>

</style>